import {ReactNode, useState} from 'react';
import {Access, useAccess, Link} from 'umi';
import {Button, Divider, Space} from 'antd';
import {PageContainer, ProLayout, MenuDataItem} from '@ant-design/pro-components';
import type {BasicLayoutProps} from '@ant-design/pro-layout';
import {MenuUnfoldOutlined, MenuFoldOutlined, ArrowLeftOutlined} from '@ant-design/icons';

import {SimpleFooter} from './components/Footer';
import Nav from './components/Nav';

import logo from '@public/images/logo-1.png';
import styles from './dashboardLayout.less';
import {KeepAlive, AliveScope} from 'react-activation';

const DashboardLayout = (props: BasicLayoutProps) => {
    const {route, location} = props;
    const access = useAccess();
    const [collapsed, setCollapsed] = useState<boolean>(false);

    if (!access.canAdmin()) {
        // history.push('/user/login');
        return null;
    }

    return (

        <Access accessible={access.canAdmin()}>
            <ProLayout
                className={styles.wrapper}
                title="空天应用知库"
                navTheme="light"
                fixSiderbar
                fixedHeader
                location={location}
                logo={logo}
                menu={{
                    ignoreFlatMenu: true,
                    defaultOpenAll: true,
                    locale: false,
                }}
                menuItemRender={(menu: MenuDataItem, dom: ReactNode) => (
                    <Space>
                        {menu.icon}
                        <Link to={menu.path}>{menu.name}</Link>
                    </Space>
                )}
                route={route}
                rightContentRender={() => (
                    <Nav style={{width: 300}}>
                        <Link to={'/home'}>
                            <Space>
                                <ArrowLeftOutlined/>
                                返回首页
                            </Space>
                        </Link>
                    </Nav>
                )}
                footerRender={() => (
                    <SimpleFooter/>
                )}
                collapsed={collapsed}
                collapsedButtonRender={false}
                onCollapse={setCollapsed}
                breadcrumbRender={(routers = []) => [
                    {
                        path: '/',
                        breadcrumbName: '空天应用知库',
                    },
                    {
                        key: 'home',
                        path: '/dashboard',
                        breadcrumbName: '工作台',
                    },
                    ...routers,
                ]}
                headerContentRender={() => {
                    return (
                        <Space split={<Divider type="vertical"/>}>
                            <Button
                                type="link"
                                size="small"
                                icon={collapsed ? <MenuUnfoldOutlined/> : <MenuFoldOutlined/>}
                                onClick={() => setCollapsed(!collapsed)}
                            ></Button>
                        </Space>
                    );
                }}
            >
                <PageContainer title={false} fixedHeader={true}>
                    <AliveScope>
                        {props.children}
                    </AliveScope>
                </PageContainer>
            </ProLayout>
        </Access>

    );
};
export default DashboardLayout;
